<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="../css/mui.css" />
		<style type="text/css">
			.mui-bar-nav { background: #fdd100;}
			.mui-pull-left,.mui-pull-left:active { color: #000;}
			#search { position: absolute;right: 0; line-height: 44px; padding: 0 14px; color: #000; font-size: 14px;}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {color: #000;}
			.mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-progress-bar { background-color: #fdd100;}
			
			.mui-bar~.mui-content .mui-fullscreen {top:44px;height:auto;}
			.mui-pull-top-tips {position:absolute;top:-20px;left:50%;margin-left:-25px;width:40px;height:40px;border-radius:100%; z-index: 100;}
			.mui-bar~.mui-pull-top-tips {top:24px;}
			.mui-pull-top-wrapper {width:42px;height:42px;display:block;text-align:center;background-color:#efeff4;border:1px solid #ddd;border-radius:25px;background-clip:padding-box;box-shadow:0 4px 10px #bbb;overflow:hidden;}
			.mui-pull-top-tips.mui-transitioning {-webkit-transition-duration:200ms;transition-duration:200ms;}
			.mui-pull-top-tips .mui-pull-loading {-webkit-backface-visibility:hidden;-webkit-transition-duration:400ms;transition-duration:400ms;margin:0;}
			.mui-pull-top-wrapper .mui-icon,.mui-pull-top-wrapper .mui-spinner {margin-top:7px;}
			.mui-pull-top-wrapper .mui-icon.mui-reverse {-webkit-transform:rotate(180deg) translateZ(0);}
			.mui-pull-bottom-tips {text-align:center;background-color:#efeff4;font-size:15px;line-height:40px;color:#777;}
			.mui-pull-top-canvas {overflow:hidden;background-color:#fafafa;border-radius:40px;box-shadow:0 4px 10px #bbb;width:40px;height:40px;margin:0 auto;}
			.mui-pull-top-canvas canvas {width:40px;}
			.mui-slider-indicator.mui-segmented-control {background-color:#efeff4;}
			.mui-table-view-cell { padding: 11px 15px 11px 25px;}
			.mui-table-view-cell:after { left: 0;background-color:#eee;}
			.mui-table-view-cell span { left: 0 !important; right: auto !important;}
			.mui-table-view-cell > a:not(.mui-btn) { padding-left: 30px;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">舞曲</h1>
			<a id="search">搜索</a>
		</header>
		<div class="mui-content">
			<div class="mui-slider mui-fullscreen">
				<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1">歌曲推荐</a>
					<a class="mui-control-item" href="#item2">经典舞曲</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1" class="mui-slider-item mui-control-content mui-active">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view"></ul>
							</div>
						</div>
					</div>
					<div id="item2" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view"></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
		<script src="../js/mui.pullToRefresh.material.js"></script>
		<script src="../js/zepto.min.js"></script>
		<script>
			mui.init({
				preloadPages:[{
				    id:'../classify/class_list.html',
				    url:'../classify/class_list.html'           
				}]
			});
			(function($) {
				//阻尼系数
				var linum = [1,1];
				var deceleration = mui.os.ios?0.003:0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: true, //是否显示滚动条
					deceleration:deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							down: {
//								callback: function() {
//									var self = this;
//									setTimeout(function() {
//										var ul = self.element.querySelector('.mui-table-view');
////										ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
//										self.endPullDownToRefresh();
//									}, 1000);
//								}
							},
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.appendChild(createFragment(ul, index, 20));
										self.endPullUpToRefresh();
									}, 1000);
								},
								auto: true
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						for (var i = 0; i < count; i++) {
							
							li = document.createElement('li');
							li.className = "mui-table-view-cell";
							if(linum[index]==1){
								li.innerHTML = '<a class="mui-navigate-right" data-text="你想去的话"><span class="mui-badge mui-badge-danger">'+linum[index]+'</span>你想去的话</a>';
							}else if ( linum[index]==2){
								li.innerHTML = '<a class="mui-navigate-right" data-text="喜欢你，但害怕"><span class="mui-badge mui-badge-success">'+linum[index]+'</span>喜欢你，但害怕</a>';
							}else if ( linum[index]==3){
								li.innerHTML = '<a class="mui-navigate-right" data-text="有你不一样"><span class="mui-badge mui-badge-primary">'+linum[index]+'</span>有你不一样</a>';
							}else{
								li.innerHTML = '<a class="mui-navigate-right" data-text="致姗姗来迟的你"><span class="mui-badge">'+linum[index]+'</span>致姗姗来迟的你</a>';
							}
							fragment.appendChild(li);
							linum[index]++;
						}
						
						return fragment;
					};
				});
			})(mui);
			//跳转搜索
			document.getElementById("search").addEventListener('tap', function() {
				mui.openWindow({
					url: '../search.html',
					id: 'search'});
			});
			mui.plusReady(function() {
				$(".mui-scroll").on("tap","a",function(){
					var search_text = $(this).attr("data-text");
					mui.openWindow({
					    url: '../search_end.html', 
					    extras:{
							search_text:search_text
						}
					});
				});
			});
		</script>
	</body>

</html>